<template>
  <div>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-lx-tagfill"></i> 赛事管理</el-breadcrumb-item>
            <el-breadcrumb-item>赛事创建</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-card shadow="hover">
        <h2 style="text-align: center;margin-bottom: 10px;">赛事创建</h2>
        <el-form label-width="70px">
          <el-row>
            <el-col :span="8"/>
            <el-col :span="8">
              <el-form-item label="比赛类型" >
                <el-cascader :options="compOptions" clearable v-model="compOptionsDetail" />
              </el-form-item>
            </el-col>
            <el-col :span="8"/>
          </el-row>
          <el-row>
            <el-col :span="8"/>
            <el-col :span="8">
              <el-form-item label="比赛名称" >
                <el-input v-model="competitionName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8"/>
          </el-row>
          <el-row>
            <el-col :span="8"/>
            <el-col :span="8">
              <el-form-item label="比赛规则">
                <el-input type="textarea"  autosize v-model="comp.rules" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8"/>
          </el-row>
          <el-row>
            <el-col :span="8"/>
            <el-col :span="8">
              <el-form-item label="预计时间" >
                <el-input-number v-model="comp.costTime" :min="1"></el-input-number>
                  <span> (分钟)</span>
              </el-form-item>
            </el-col>
             <el-col :span="8"/>
          </el-row>
          <el-row>
            <el-col :span="8"/>
            <el-col :span="8">
              <el-form-item label="裁判" >
                <el-select v-model="comp.referee" filterable remote 
                  placeholder="请输入关键词" :remote-method="getRecommendRefereesList"
                  :loading="loading">
                  <el-option v-for="item in recommendRefereesList"
                      :key="item.value"
                      :label="item.value+'-'+item.label"
                      :value="item.value+'-'+item.label"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8"/>
          </el-row>
          <el-row justify="center" >
            <el-col :span="8"/>
            <el-col :span="8">
             <el-form-item>
                <el-button type="primary" @click="submit()">提交</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8"/>
          </el-row>
           
        </el-form>  
    </el-card>
  </div>
    
</template>

<script>
import { map } from "lodash";
import { reactive, ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { ElMessage } from 'element-plus';
export default {
  setup() {
    const store = useStore();
    const compOptionsDetail = ref("");
    const competitionName = computed(
      () => {
        // let name = [];
        // console.log("@@@",name.push(...compOptionsDetail.value))
        // return name.toString().replace(/,/g,"");
        const ans = compOptionsDetail.value.toString().replace(/[,]/g,"");
        // console.log("@@@",ans)
        return ans;
      }
    );
    const comp = reactive({//赛事对象
      rules:'',
      costTime:0,
      precision:1,
      step:0.1,
      referee: '',
    });

    // 级联写法
    const schoolOptions = [
      {
        value:"高校组",
        label:"高校组",
      },
      {
        value:"高中组",
        label:"高中组",
      },
      {
        value:"初中组",
        label:"初中组",
      },
      {
        value:"小学组",
        label:"小学组",
      },
    ];
    const compClassOptions = [
      {
        value:"男子",
        label:"男子",
        children:schoolOptions
      },
      {
        value:"女子",
        label:"女子",
        children:schoolOptions
      },
    ]
    const compOptions = [
      {
        value:"自选",
        label:"自选",
        children:[
          {
            value: "南拳(无器械)",
            label: "南拳",
            children:compClassOptions,
          },
          {
            value: "南棍(长器械)",
            label: "南棍",
            children:compClassOptions,
          },
          {
            value:"南刀(短器械)",
            label:"南刀",
            children:compClassOptions,
          }
        ]
      },
      {
        value:"传统",
        label:"传统",
        children:[
          {
            value:"长拳(无器械)",
            label:"长拳",
            children:compClassOptions,
          },
          {
            value:"中国剑术(短器械)",
            label:"中国剑术",
            children:compClassOptions,
          },
          {
            value:"六合枪(长器械)",
            label:"六合枪",
            children:compClassOptions,
          }
        ]
      },
      {
        value:"太极",
        label:"太极",
        children:[
          {
            value:"太极拳(无器械)",
            label:"太极拳",
            children:compClassOptions,
          },
          {
            value:"太极剑(长器械)",
            label:"太极剑",
            children:compClassOptions,
          }
        ]
      }
    ];
    

    /* 远程搜索裁判 */
    const loading = ref(false);
    const remoteReferees = reactive([]);
    const recommendRefereesList = reactive([]);
    const getRecommendRefereesList = (query)=>{
        // console.log("处理后的远端数据为 ",remoteReferees);
        // console.log("@@搜索的关键词为 ",query);
        if(query.length>0){
            loading.value = true;
            setTimeout(() => {
                loading.value = false
                recommendRefereesList.splice(0,recommendRefereesList.length,...remoteReferees.filter((item) => {
                    // console.log("item",item)
                    return item.label.toString().search(query)>-1 ||
                        item.value.toString().search(query)>-1
                })) 
                // console.log("@@推荐的裁判列表为 ",recommendRefereesList)
            }, 200)
        }else{
            recommendRefereesList.splice(0,recommendRefereesList.length,...remoteReferees);
        }
    };

    onMounted(()=>{
       store.dispatch("RefereeList").then(res=>{
        if(res.code===200){
            remoteReferees.splice(0,remoteReferees.length,...map(res.obj,(item)=>{
            return {
              value:item.jid,
              label:item.name
            }
          }))
          // console.log("remoteReferees ",remoteReferees)
        }else{
          console.log("获取所有裁判失败",res.message)
        }
      }).catch(err=>{
        console.log("查询裁判结果出现异常 ",err);
      });
      
    })

    

    
    const handleSelect = (item)=> {
        // console.log("选中裁判为",item);
        comp.referee = item.key;
    }


    const submit = () => {
      
      store.dispatch("AddCompetition",
        {
          cname:competitionName.value,//名字
          crule:comp.rules,//规则
          headJudge:comp.referee.split('-')[0],//裁判
          timeNeed:comp.costTime,//时间
        }
        ).then(res=>{
            if(res.code === 200){
              ElMessage({
                type: 'success',
                message: '添加成功',
                center: true
              })
            }else{
              ElMessage({
                type: 'error',
                message: '添加失败 '+res.message,
                center:true,
              })
          }
        }).catch(err=>{
          console.log("创建比赛异常",err);
        });
      
      };

    return {
      competitionName,
      comp,
      compOptions,
      compOptionsDetail,
      //查询裁判
      loading,
      getRecommendRefereesList,
      recommendRefereesList,
      remoteReferees,
      handleSelect,
      submit,
    }
  }
}
</script>


<style scoped>
  .property-div{
    margin:20px 0;
  }
</style>